<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Task-105</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .td{width:100px;overflow:hidden}
    </style>
</head>

<body>
    <div class="container" style="padding-top:50px">
        <div class="row">        
            <div class="col-xs-12 col-sm-12">
            <img width="160px" height="160px" class="img-circle center-block" src="./photo.jpg">
            <h2 class="text-center ">HELLO</h2>
            <h3 class="text-center">My name is ZY·PC And This is my Resume</h3>
            </div>
        
            <div class="col-xs-12 col-sm-12" style="padding-left:100px">                                              
            
                <div class="col-xs-12 col-sm-8">        
                    <div class="row">     

                        <div class="col-xs-12 col-sm-12">        
                            <h3>//About me</h3>                    
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio
                            magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
                        </div>
                            
                        <div class="col-xs-12 col-sm-12">
                            <h3>//Education</h3>
                            <div class="row">

                                <div class="col-xs-3 col-sm-3">
                                    <ul>                                
                                        <li>1990</li>                                
                                        <li>2005</li>                               
                                        <li>2009</li>                                
                                        <li>2012</li>
                                    </ul>
                                </div>

                                <div class="col-xs-9 col-sm-9">
                                    <ul>
                                        <li>was born in Katowice<br>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente,
                                            exercitationem, totam, dolores iste dolore est aut modi.</li>
                                        <li>school specializing in artistic<br>
                                            Eos, explicabo, nam, tenetur et ab eius deserunt aspernatur 
                                            ipsum ducimus quibusdam quis voluptatibus.</li>
                                        <li>level graduation in Graphic Design<br>
                                            Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus 
                                            quaerat quibusdam perferendis? Iusto, quibusdam asperiores unde repellat.</li>
                                        <li>Second level graduation in Graphic Design<br>
                                            Ducimus, aliquam tempore autem itaque et accusantium!</li>
                                    </ul>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-xs-12 col-sm-12" style="padding-bottom:50px">
                            <h3>//Experience</h3>                                                           
                            <table width="100%">                                    
                                <tbody>
                                
                                <tr>
                                    <td><li></li></td>
                                </tr>                                
                                
                                <tr>
                                    <td width="30%" valign="top">Google<br>2013-2014</td> <!--单元格内部顶部对齐-->
                                    <td width="70%">Front-end developer / php programmer<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus voluptatum? Enim, itaque dignissimos quia.</td>
                                </tr>
                                
                                <tr>
                                    <td><li></li></td>
                                </tr>

                                <tr>
                                    <td width="30%" valign="top">Twitter<br>2012</td>
                                    <td width="70%">Web Developer<br>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium. Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae sed quidem voluptas explicabo soluta.</td>
                                </tr>

                                </tbody>                                                                
                            </table>                               
                        </div>
                    </div>
                </div>                   
         
                    <div class="col-xs-12 col-sm-4">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12">
                            <h3>//Contact</h3>
                            <table>
                                <tbody>
                                    <tr>
                                        <td width="30%"><span class="glyphicon glyphicon-earphone"></span></td>
                                        <td>500 345 242</td>
                                    </tr>
                                    <tr>
                                        <td><span class="glyphicon glyphicon-earphone"></span></td>
                                        <td>office</td>
                                    </tr>
                                    <tr>
                                        <td><span class="glyphicon glyphicon-earphone"></span></td>
                                        <td>Twitter</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>http://twitter.com/WordPress</td>
                                    </tr>
                                    <tr>
                                        <td><span class="glyphicon glyphicon-earphone"></span></td>
                                        <td>Facebook</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>http://www.facebook.com/facebook</td>
                                    </tr>
                                    <tr>
                                        <td><span class="glyphicon glyphicon-earphone"></span></td>
                                        <td>Skype</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>kamsolutins</td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>

                            <div class="col-xs-12 col-sm-12">
                            <h3>//Skills</h3>
                            <ul>
                                <li>HTML</li>
                                <li>CSS</li>
                                <li>jQuery</li>
                                <li>PHP</li>
                                <li>Laravel 2(framework)</li>
                                <p></p>
                                <li>Beginner</li>
                                <li>Proficient</li>
                                <li>Expert</li>
                                <li>Master</li>
                            </ul>
                            </div>
                        
                            <div class="col-xs-12 col-sm-12">
                            <h3>//Languages</h3>
                            <table width="100%">
                                    <tbody>
                                    <tr>
                                        <td><li></li></td>
                                    </tr>
                                    <tr>
                                        <td width="40%">Polish</td>
                                        <td width="60%">
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span class="glyphicon glyphicon-star"></span>
                                            <span class="glyphicon glyphicon-star"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><li></li></td>
                                    </tr>
                                    <tr>
                                        <td>English</td>
                                        <td><span class="glyphicon glyphicon-star"></span></td>                                       
                                    </tr>
                                    </tbody>
                            </table> 
                            </div>
                        
                            <div class="col-xs-12 col-sm-12">
                            <h3>//Hobbies</h3>
                            <ul>
                                <li><span class="glyphicon glyphicon-heart-empty"></span>Photography</li>
                                <li><span class="glyphicon glyphicon-heart-empty"></span>Fitness</li>
                                <li><span class="glyphicon glyphicon-heart-empty"></span>Programming</li>
                            </ul>        
                            </div>
                        </div>
                    </div>                 
            </div>
        </div>
    </div>
</body>
</html>